// import { DownOutlined } from '@ant-design/icons';
// import { useState } from 'react';
// import { Tree, Table, Space } from 'antd';
// import './tongzhi.less';
// const columns = [
//     {
//         title: '公告名称',
//         dataIndex: 'title',
//     },
//     {
//         title: '是否公开',
//         dataIndex: 'sta',
//     },
//     {
//         title: '接收人员',
//         dataIndex: 'people',
//     },
//     {
//         title: '公告时间',
//         dataIndex: 'day',
//     },
//     {
//         title: '创建人',
//         dataIndex: 'person',
//     },
//     {
//         title: '操作',
//         key: 'action',
//         render: (_, record) => (
//             <Space size="middle">
//                 <a>删除</a>
//             </Space>
//         ),
//     },
// ];

// const App = () => {
//     let [done, setOne] = useState([
//         { id: 1, sta: '是', person: 'zy', people: '无', title: '关于公司人事任免通知书', day: '2020.06.16' },
//         { id: 2, sta: '是', person: 'zy', people: '无', title: '关于2020年春节放假的通知', day: '2020.06.16' },
//         { id: 3, sta: '是', person: 'zy', people: '无', title: '关于最新的公司规章制度细节通知', day: '2020.06.16' },
//         { id: 4, sta: '是', person: 'zy', people: '无', title: '公司内部招聘公告', day: '2020.06.16' },
//         { id: 5, sta: '是', person: 'zy', people: '无', title: '关于开展《经济合同法》的相关培训', day: '2020.06.16' },
//         { id: 6, sta: '是', person: 'zy', people: '无', title: '夏雪签署与光大公司的大订单，奖励3000元', day: '2020.06.16' },
//         { id: 7, sta: '是', person: 'zy', people: '无', title: '关于六月份综合工作培训内容及相关注意事项通知', day: '2020.06.16' },
//         { id: 8, sta: '是', person: 'zy', people: '无', title: '销售部招聘员工通知', day: '2020.06.16' },
//         { id: 9, sta: '是', person: 'zy', people: '无', title: '关于各分公司培训会议的通知', day: '2020.06.16' },
//     ])
//     // 树
//     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
//     const onSelectChange = (newSelectedRowKeys) => {
//         console.log('selectedRowKeys changed: ', newSelectedRowKeys);
//         setSelectedRowKeys(newSelectedRowKeys);
//     };
//     const rowSelection = {
//         selectedRowKeys,
//         onChange: onSelectChange,
//         selections: [
//             Table.SELECTION_ALL,
//             Table.SELECTION_INVERT,
//             Table.SELECTION_NONE,
//             {
//                 key: 'odd',
//                 text: 'Select Odd Row',
//                 onSelect: (changableRowKeys) => {
//                     let newSelectedRowKeys = [];
//                     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
//                         if (index % 2 !== 0) {
//                             return false;
//                         }
//                         return true;
//                     });
//                     setSelectedRowKeys(newSelectedRowKeys);
//                 },
//             },
//             {
//                 key: 'even',
//                 text: 'Select Even Row',
//                 onSelect: (changableRowKeys) => {
//                     let newSelectedRowKeys = [];
//                     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
//                         if (index % 2 !== 0) {
//                             return true;
//                         }
//                         return false;
//                     });
//                     setSelectedRowKeys(newSelectedRowKeys);
//                 },
//             },
//         ],
//     };

//     return (
//         <Table pagination={false} rowSelection={rowSelection} columns={columns} dataSource={done} />
//     );
// };
// export default App;
import { DownOutlined } from '@ant-design/icons';
import { useState, forwardRef } from 'react';
import { Table } from '@arco-design/web-react';
import { Resizable } from 'react-resizable';
import { Tree, Space } from 'antd';
import './tongzhi.less';

const originColumns = [
    {
        title: '公告名称',
        dataIndex: 'title',
        width: 500,
    },
    {
        title: '是否公开',
        dataIndex: 'sta',
        width: 150,

    },
    {
        title: '接收人员',
        dataIndex: 'people',
        width: 120,

    },
    {
        title: '公告时间',
        dataIndex: 'day',
        width: 100,

    },
    {
        title: '创建人',
        dataIndex: 'person',
        width: 100,

    },
    {
        title: '操作',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <a>删除</a>
            </Space>
        ),
    },
];
const CustomResizeHandle = forwardRef((props, ref) => {
    const { handleAxis, ...restProps } = props;
    return (
        <span
            ref={ref}
            className={`react-resizable-handle react-resizable-handle-${handleAxis}`}
            {...restProps}
            onClick={(e) => {
                e.stopPropagation();
            }}
        />
    );
});

const ResizableTitle = (props) => {
    const { onResize, width, ...restProps } = props;

    if (!width) {
        return <th {...restProps} />;
    }

    return (
        <Resizable
            width={width}
            height={0}
            handle={<CustomResizeHandle />}
            onResize={onResize}
            draggableOpts={{
                enableUserSelectHack: false,
            }}
        >
            <th {...restProps} />
        </Resizable>
    );
};


function App() {
    const [columns, setColumns] = useState(
        originColumns.map((column, index) => {
            if (column.width) {
                return {
                    ...column,
                    onHeaderCell: (col) => ({
                        width: col.width,
                        onResize: handleResize(index),
                    }),
                };
            }

            return column;
        })
    );
    let [done, setOne] = useState([
        { id: '1', sta: '是', person: 'zy', people: '无', title: '关于公司人事任免通知书', day: '2020.06.16' },
        { id: '2', sta: '是', person: 'zy', people: '无', title: '关于2020年春节放假的通知', day: '2020.06.16' },
        { id: '3', sta: '是', person: 'zy', people: '无', title: '关于最新的公司规章制度细节通知', day: '2020.06.16' },
        { id: '4', sta: '是', person: 'zy', people: '无', title: '公司内部招聘公告', day: '2020.06.16' },
        { id: '5', sta: '是', person: 'zy', people: '无', title: '关于开展《经济合同法》的相关培训', day: '2020.06.16' },
        { id: '6', sta: '是', person: 'zy', people: '无', title: '夏雪签署与光大公司的大订单，奖励3000元', day: '2020.06.16' },
        { id: '7', sta: '是', person: 'zy', people: '无', title: '关于六月份综合工作培训内容及相关注意事项通知', day: '2020.06.16' },
        { id: '8', sta: '是', person: 'zy', people: '无', title: '销售部招聘员工通知', day: '2020.06.16' },
        { id: '9', sta: '是', person: 'zy', people: '无', title: '关于各分公司培训会议的通知', day: '2020.06.16' },
    ])

    function handleResize(index) {
        return (e, { size }) => {
            setColumns((prevColumns) => {
                const nextColumns = [...prevColumns];
                nextColumns[index] = { ...nextColumns[index], width: size.width };
                return nextColumns;
            });
        };
    }

    const components = {
        header: {
            th: ResizableTitle,
        },
    };

    // 单选
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    // 渲染
    return (
        <div className="tongzhi">
            <Table
                className='table-demo-resizable-column'
                components={components}
                border
                borderCell
                columns={columns}
                data={done}
                pagination={false}
                rowSelection={{
                    selectedRowKeys,
                    onChange: (selectedRowKeys, selectedRows) => {
                        console.log('onChange:', selectedRowKeys, selectedRows);
                        setSelectedRowKeys(selectedRowKeys);
                    },
                }}
            />
        </div>

    );
}

// 
export default App;